//附近场地
<template>
	<view>
		<view class="father">
			<image class="novenue" src="@/static/images/background/operate/venue/novenue.webp" mode="aspectFill"
				v-if="!haveVenue"></image>
				<text class="text" v-if="!haveVenue">
				暂无场地
				</text>
			<view class="son" v-for="(k,i) in venue_arr" :key="k.id">
				<image :src="k.pic" mode="aspectFill"></image>
				<text class="name">{{k.name}}</text>
				<text class="address">{{k.address}}</text>
				<view class="coachNum">{{k.coachNum}}位教练</view>
				<view class="carNum">{{k.carNum}}辆教练车</view>
				<view class="position">
					<!-- //点击position盒子打开地图没做 -->
					<image src="@/static/images/icon/venue/arrowhead.png" mode="aspectFill" class="arrowhead"></image>
					<text class="distance">{{k.distance}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				haveVenue: true,
				venue_arr: [
					{
							pic: '../../../../static/images/background/operate/venue/pic.webp',
							name: '梅州驾校练习场地',
							address: '广东省梅州市梅江区富奇路12号',
							coachNum: 12,
							carNum: 30,
							distance: '12km',
							id:1,
						},
						{
							pic: '../../../../static/images/background/operate/venue/pic.webp',
							name: '梅州驾校练习场地',
							address: '广东省梅州市梅江区富奇路12号',
							coachNum: 11,
							carNum: 30,
							distance: '12km',
							id:2,
						},
						{
							pic: '../../../../static/images/background/operate/venue/pic.webp',
							name: '梅州驾校练习场地',
							address: '广东省梅州市梅江区富奇路12号',
							coachNum: 112,
							carNum: 300,
							distance: '120km',
							id:3,
						}
				],
			}
		},
		methods: {

		},
		onShow() {
			if(this.venue_arr.length==0){
				this.haveVenue=false
			}
			else{
				this.haveVenue=true
			}
		}
	}
</script>

<style>
	page {
		background: #f2f3f5;
	}

	.father {
	position: relative;
		display: flex;
		flex-direction:column;
		flex-wrap:wrap;
		padding-top: 20rpx;

	}

	.father .novenue {
		position: absolute;
		top: 287rpx;
		left: 212rpx;
		width: 326rpx;
		height: 177rpx;
	}
	
	.father .text{
		position: absolute;
		top: 494rpx;
		left: 319rpx;
		width: 112rpx;
		height: 28rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		text-align: center;
		color: #999999;
		line-height: 40rpx;
	}

	.father .son {
		position: relative;
		margin: 0 24rpx 20rpx;
		width: 702rpx;
		height: 188rpx;
		background: #fff;
		border-radius: 8rpx;
	}

	.father .son image {
		position: absolute;
		top: 24rpx;
		left: 20rpx;
		width: 140rpx;
		height: 140rpx;
	}

	.father .son text {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.father .son .name {
		position: absolute;
		top: 24rpx;
		left: 180rpx;
		width: 224rpx;
		height: 28rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: left;
		color: #111111;
		line-height: 29rpx;
	}

	.father .son .address {
		position: absolute;
		top: 68rpx;
		left: 180rpx;
		width: 339rpx;
		height: 26rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		text-align: left;
		color: #999999;
		line-height: 30rpx;
	}

	.father .son .coachNum {
		position: absolute;
		left: 180rpx;
		top: 118rpx;
		width: 109rpx;
		height: 36rpx;
		background: #ffecd9;
		border-radius: 2rpx;
		font-size: 20rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		text-align: center;
		color: #f17516;
		line-height: 36rpx;
	}

.carNum,.coachNum {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
	.father .son .carNum {
		position: absolute;
		top: 118rpx;
		left: 305rpx;
		width: 131rpx;
		height: 36rpx;
		background: #dff9dc;
		border-radius: 2rpx;
		font-size: 20rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		text-align: center;
		color: #29c563;
		line-height: 36rpx;
	}

	.father .son .position {
		position: absolute;
		top: 24rpx;
		right: 0rpx;
		height: 140rpx;
		width: 156rpx;
		/* background-color: skyblue; */
		border-left: #e3e3e3 solid 2rpx;
	}

	.father .son .position .arrowhead {
		position: absolute;
		top: 26rpx;
		left: 57rpx;
		/* background-color: yellowgreen; */
		width: 54rpx;
		height: 58rpx;
	}

	.father .son .position .distance {
		position: absolute;
		bottom: 20rpx;
		right: 36rpx;
		width: 84rpx;
		height: 24rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		text-align: center;
		color: #666666;
		line-height: 29rpx;
	}
</style>
